<!--
 * @Author: wuzhen
 * @Date: 2020-01-14 13:10:54
 * @LastEditors: wuzhen
 * @LastEditTime: 2020-04-20 17:54:14
 * @Description: 头部注释
 -->
<template>
  <div class="chat-sider">
    <div class="search-input">
      <!-- 搜索 -->
      <Input :search="true" @on-search="onSearch" @on-change="onChange" :placeholder="$t('placeholder_chat')" />
    </div>
    <div class="user-scroll-bar">
      <div class="user-list">
        <div class="user-item flex" :class="{ active: chatting.id === item.id, isSticky: item.isSticky }" v-for="(item, index) in dataList" :key="index" @contextmenu.prevent="
            e => {
              openMenu(e, index);
            }
          " @click="onClick(item)">
          <div class="user-img">
            <img :src="icon_notice" v-if="item.msgkind === 10" />
            <img :src="require('@/assets/image/icon_group.png')" v-else-if="item.grouptype === 20" />
            <wz-img :type="item.msgkind === 20 ? 'face' : 'group'" :src="item.face" v-else />
          </div>
          <div class="flex-item" style="overflow:hidden">
            <div class="flex">
              <p class="user-name flex-item" v-if="item.msgkind === 10">
                {{ $t("announcement") }}
              </p>
              <p class="user-name flex-item" v-else>{{ item.name || "" }}</p>
              <span class="time" v-if="item.content && item.createtime">{{
                $fmtMoment(item.createtime, "HH:mm")
              }}</span>
            </div>
            <div class="flex" style="align-items: center;">
              <div class="icon-fail" v-if="item.msgStatus === -1">
                <Icon type="ios-information-circle" size="15" color="#ed4014" />
              </div>
              <div class="user-msg flex-item">
                <p v-if="item.secretstatus === 20">******</p>
                <!-- 视频 -->
                <p v-else-if="item.msgtype === 1004">[{{ $t("video") }}]</p>
                <!-- 位置 -->
                <p v-else-if="item.msgtype === 1005">{{ $t("noSupport") }}</p>
                <!-- 音频 -->
                <p v-else-if="item.msgtype === 1009">[{{ $t("audio") }}]</p>
                <!-- 图片 -->
                <p v-else-if="item.msgtype === 1010">[{{ $t("picture") }}]</p>
                <!-- 个人名片 -->
                <p v-else-if="item.msgtype === 1012">[个人名片]</p>
                <p v-else>{{ item.content.content }}</p>
              </div>
              <span class="total-num" v-if="item.total">{{ item.total }}</span>
              <img :src="item.msgStatus === 1 ? icon_isSend : icon_isRead" class="icon-status" v-if="
                  item.content &&
                    item.content.content &&
                    item.msgStatus &&
                    item.msgStatus !== -1 &&
                    item.msgkind === 20 &&
                    item.msgStatus
                " />
            </div>
          </div>
        </div>
      </div>
    </div>
    <context-menu :context-menu="contextMenu" :left="contextLeft" :top="contextTop" @on-close="onCloseContextMenu" @on-click="onClickContextMenu" v-if="showContextMenu"></context-menu>
  </div>
</template>
<script>
import { Input, Icon } from "view-design";
import ContextMenu from "@/components/ContextMenu/index.vue";
import { mapGetters } from "vuex";
export default {
  components: {
    Icon,
    Input,
    ContextMenu
  },
  data() {
    return {
      icon_isSend: require("@/assets/image/icon_isSend.png"),
      icon_isRead: require("@/assets/image/icon_isRead.png"),
      icon_notice: require("@/assets/image/icon_notice.png"),
      showContextMenu: false,
      contextMenu: [
        {
          label: this.$t("btn_sticky"),
          value: "sticky"
        },
        {
          label: this.$t("btn_delChat"),
          value: "delete"
        }
      ],
      contextLeft: 0,
      contextTop: 0,
      keyword: ""
    };
  },
  computed: {
    ...mapGetters(["groups"]),
    dataList() {
      this.chatUsers.forEach(v => {
        if (v.msgkind === 20 && this.friends.find(m => m.id === v.id)) {
          const user = this.friends.find(m => m.id === v.id);
          v.name = user.name;
          v.face = user.face;
          v.secretstatus = user.secretstatus;
        } else if (v.msgkind === 30 && this.groups.find(m => m.id === v.id)) {
          const user = this.groups.find(m => m.id === v.id);
          v.name = user.name;
          v.face = user.face;
          v.grouptype = user.grouptype;
        } else if (v.msgkind === 10) {
          v.name = "";
        }
        // 默认选中之前点击聊天
        if (v.id === this.chatting.id && this.$route.name === "chat") {
          v.total = 0;
          this.onClick(v);
        }
      });
      let array = [];
      let array1 = [];
      if (this.keyword.length === 9 && !isNaN(Number(this.keyword))) {
        array = this.chatUsers.filter(
          v => v.isSticky && v.id === Number(this.keyword)
        );
        array1 = this.chatUsers.filter(
          v => !v.isSticky && v.id === Number(this.keyword)
        );
      } else {
        const ids = [];
        this.chatMsg.forEach(v => {
          if (
            v.content.content &&
            v.content.content.includes(this.keyword) &&
            v.msgtype === 1001 &&
            !ids.filter(m => m === v.id).length
          ) {
            ids.push(v.id);
          }
        });
        array = this.chatUsers.filter(
          v =>
            v.isSticky &&
            (v.name.includes(this.keyword) ||
              ids.filter(m => m === v.id).length)
        );
        array1 = this.chatUsers.filter(
          v =>
            !v.isSticky &&
            (v.name.includes(this.keyword) ||
              ids.filter(m => m === v.id).length)
        );
      }
      return [...array, ...array1];
    }
  },
  methods: {
    // 搜索
    onSearch(value) {
      if (!value.trim()) return;
      this.keyword = value;
    },
    onChange(e) {
      if (!e.target.value.trim()) this.keyword = "";
    },
    // 点击选中项
    onClick(item) {
      // 已读消息回执
      const array = this.chatMsg.filter(
        v => v.id === this.chatting.id && !v.isRead
      );
      if (array.length) {
        const data = array[array.length - 1];
        const msg = encodeURIComponent(
          JSON.stringify({
            targetid: data.fromid,
            msgkind: data.msgkind,
            msgtype: 2004,
            content: JSON.stringify({
              lastMessageSendTime: data.createtime,
              messageId: data.messageid,
              cvsationtime: data.createtime
            })
          })
        );
        if (this.$imWebSocket.socketOpen) {
          this.$imWebSocket.sendMsg(msg);
        }
        this.chatMsg.forEach(v => {
          if (v.id === this.chatting.id) {
            v.isRead = true;
          }
        });
        this.set_chatMsg(this.chatMsg);
      }
      if (item.id === this.chatting.id) return;
      // 修改正在聊天对象
      this.storeChatting({
        id: item.id,
        msgkind: item.msgkind
      });
      item.total = 0;
      this.set_chatUsers(this.chatUsers);
      this.$emit("on-click", item);
    },
    // 右键点击
    openMenu(e, index) {
      this.contextLeft = e.clientX - this.screen.x;
      this.contextTop = e.clientY - this.screen.y;
      this.$emit("close-user-info");
      this.$bus.$emit("hideBarPopup");
      this.currentIndex = index;
      this.currentUser = this.chatUsers[index];
      if (this.chatUsers[index].isSticky) {
        this.contextMenu = [
          {
            label: this.$t("btn_cancel") + " " + this.$t("btn_sticky"),
            value: "notSticky"
          },
          {
            label: this.$t("btn_delChat"),
            value: "delete"
          }
        ];
      } else {
        this.contextMenu = [
          {
            label: this.$t("btn_sticky"),
            value: "sticky"
          },
          {
            label: this.$t("btn_delChat"),
            value: "delete"
          }
        ];
      }
      this.showContextMenu = true;
    },
    // 点击右键选项
    onClickContextMenu(type) {
      switch (type) {
        case "sticky": // 置顶
          this.showContextMenu = false;
          this.chatUsers.splice(this.currentIndex, 1);
          this.chatUsers.unshift({
            ...this.currentUser,
            ...{
              isSticky: true
            }
          });
          this.set_chatUsers(this.chatUsers);
          break;
        case "notSticky": // 取消置顶
          this.showContextMenu = false;
          this.chatUsers.splice(this.currentIndex, 1);
          const array = this.chatUsers.filter(v => v.isSticky);
          this.chatUsers.splice(array.length, 0, {
            ...this.currentUser,
            ...{
              isSticky: false
            }
          });
          this.set_chatUsers(this.chatUsers);
          break;
        case "delete": // 删除
          this.chatUsers.splice(this.currentIndex, 1);
          this.set_chatUsers(this.chatUsers);
          this.set_chatting({});
          const chatMsg = this.chatMsg.filter(
            v => v.id !== this.currentUser.id
          );
          this.set_chatMsg(chatMsg);
          this.showContextMenu = false;
          break;
        default:
          break;
      }
    },
    // 关闭右键点击菜单
    onCloseContextMenu() {
      this.showContextMenu = false;
    }
  }
};
</script>
<style lang="less" scoped>
.user-item {
  position: relative;
  align-items: flex-start !important;
  &.isSticky {
    background: #ebedf2;
  }
  .time {
    font-size: 12px;
    color: #afafaf;
  }
  .total-num {
    background: #fa5950;
    border-radius: 8000px;
    color: #fff;
    padding: 0 7px;
    transform: scale(0.7);
    position: relative;
    right: -2px;
  }
  .icon-status {
    width: 15px;
    height: 15px;
  }
}
</style>
